<div class="content">

<div class="big-box" *ngFor="let masonaryitem of masonaryitems">
       
    <!--图片弹框触发-->
    <div class="special-box" (click)="openModal(masonaryitem)">
    
    <!--图片盒子-->
    <div class="masonaryitem-imgbox">
        <img class="masonaryitem-textimg" [src]="masonaryitem.src" alt="masonaryitem-srccheck">
    </div>

    <!--图片数量显示-->
    <div class="img-number">
        {{masonaryitem.imgnumber}}
    </div>

    <!--鼠标悬停显示创作名和创作同款的效果-->
    <div class="img-hover-item">
        <div class="create-name">
            {{masonaryitem.name}}
        </div>
        <div class="create-image" routerLink="/pipi/img_img">
            创作同款
        </div>
    </div>

    <!--待解决问题:背景阴影层级
                   图片去掉margin的重叠问题-->
    </div>
        
    <div class="masonaryitem-contentbox">
        <!--用户头像和用户名-->
        <div class="masonaryitem-user">
            <div class="masonaryitem-userimgbox">
                <img class="masonaryitem-userimg" [src]="masonaryitem.profilephoto" alt="masonaryitem-profilephotocheck">
            </div>
            <div>{{masonaryitem.username}}</div>
        </div>

        <!--收藏按钮和收藏数显示-->
        <div class="collect-content">
            <div class="masonaryitem-iconcollect" [class]="masonaryitem.iconcollect"></div>
            <div class="masonaryitem-countcollect">{{masonaryitem.countcollect}}</div>
        </div>
    </div>
</div>

<!--图片弹框设置-->
<div class="modal" [style.display]="modalVisible ? 'block' : 'none'">
    <div class="modal-content" >
        <!--图片预览-->
        <div class="photos">
            <img class="masonaryitem-imgpreview" [src]="selectedItem?.src" alt="masonaryitem-srccheck">
        </div>

        <!--弹框右边内容-->
        <div class="right-box">
        <!--图片相关信息-->
        <div class="photo-info">

            <!--关闭图标-->
            <div class="icon-box">
                <div class="iconfont icon-shanchu2" (click)="closeModal()"></div>
            </div>
            
            <!--用户头像和用户名-->
            <div class="popup-userbox">
                <img class="masonaryitem-userimg" [src]="selectedItem?.profilephoto" alt="masonaryItem-profilephotocheck">
                <div>{{selectedItem?.username}}</div>
            </div>

            <!--作品基本信息-->
            <div class="image-info">

            <!--创作名-->
            <div class="popup-imagename">{{selectedItem?.name}}</div>

            <!--简介-->
            <div class="popup-imageintroduce">{{selectedItem?.introduce}}</div>

            <!--收藏和发布时间-->
            <div class="popup-smallbox">
                <div class="popup-collect">
                    <div class="masonaryitem-iconcollect" [class]="selectedItem?.iconcollect"></div>
                    <div class="masonaryitem-countcollect">{{selectedItem?.countcollect}}</div>
                </div>

                <div class="popup-publishtime">发布时间:2023-05-19 21:47</div>
            </div>

            <!--创意描述内容-->
            <div class="modal-explain-box">
                <div class="miaoshu">
                    <div class="font-size-one">创意描述</div>

                    <div class="copy-box" (click)="copyTextToClipboard(selectedItem?.createexplain)" (click)="createMessage('success')">
                            <span class="iconfont icon-fuzhi"></span>
                            <div class="font-size-two">复制描述</div>
                    </div>
                </div>

                <div class="create-explain">{{selectedItem?.createexplain}}</div>
            </div>

            <!--模型选择-->
            <div class="modal-select-box">
                <div class="modal-size">模型</div>

                <div class="modal-select">
                    <div class="modal-select-mod">
                    <div class="modal-img-select-box">
                        <img class="modal-img-select" src="https://aigc.meitudata.com/resources-origin/648ea7bf490542008ig80ZL95q7888.png?k=fb8a0860bf64bd53a973b2c0b0475d46&t=64d10d80">
                    </div>

                    <div class="modal-select-info">
                        <div class="modal-select-name">模型名称</div>
                        <div class="modal-select-explain">模型描述介绍</div>
                    </div>
                    </div>

                    <div class="modal-select-jiantou">
                        <div class="iconfont icon-youjiantou"></div>
                    </div>

                </div>
            </div>
            </div>
        </div>

        <!--跳转图标-->
        <div class="tushengtu" routerLink="/pipi/img_img">创作同款</div>
        </div>
      
    </div>
</div>

</div>